<template>
  <div class="shipping-management">
    <!-- 筛选栏 -->
    <el-form :inline="true" :model="filters" class="filter-form">
      <el-form-item label="所属团长">
        <el-select v-model="filters.groupLeader" placeholder="全部" clearable>
          <el-option label="全部" value="" />
          <el-option
            v-for="leader in groupLeaderOptions"
            :key="leader"
            :label="leader"
            :value="leader"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="团长区域">
        <el-select v-model="filters.groupArea" placeholder="全部" clearable>
          <el-option label="全部" value="" />
          <el-option
            v-for="area in groupAreaOptions"
            :key="area"
            :label="area"
            :value="area"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="承运时间">
        <el-date-picker
          v-model="filters.dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="订单号">
        <el-input
          v-model="filters.orderNo"
          placeholder="请输入内容"
          clearable
        />
      </el-form-item>
      <el-form-item label="司机">
        <el-input v-model="filters.driver" placeholder="请输入内容" clearable />
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="filters.name" placeholder="请输入内容" clearable />
      </el-form-item>
      <el-form-item label="收件人">
        <el-input
          v-model="filters.receiver"
          placeholder="请输入内容"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
        <el-button type="danger" @click="onExport">导出</el-button>
      </el-form-item>
    </el-form>

    <!-- tab切换 -->
    <el-tabs v-model="activeTab" class="tab-bar">
      <el-tab-pane label="全部" name="all" />
      <el-tab-pane label="待发货" name="pending" />
      <el-tab-pane label="送货中" name="delivering" />
      <el-tab-pane label="已收货" name="received" />
    </el-tabs>

    <!-- 表格 -->
    <el-table
      :data="pagedData"
      border
      style="width: 100%"
      @selection-change="onSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="shippingNo" label="发货单号" width="140" />
      <el-table-column prop="shippingDate" label="承运时间" width="120" />
      <el-table-column prop="groupLeader" label="所属团长" width="120" />
      <el-table-column prop="goodsCount" label="货物数量" width="100" />
      <el-table-column prop="driver" label="运输司机" width="120" />
      <el-table-column prop="phone" label="联系方式" width="140" />
      <el-table-column prop="carNo" label="车牌号" width="140" />
      <el-table-column prop="statusLabel" label="状态" width="100" />
      <el-table-column label="操作" width="200">
        <template #default="{ row }">
          <el-link type="primary" @click="onView(row)">查看</el-link>
          <template v-if="row.status === 'pending'">
            <el-divider direction="vertical" />
            <el-link type="success" @click="onShip(row)">发货</el-link>
          </template>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-wrapper">
      <el-pagination
        background
        layout="prev, pager, next, jumper"
        :total="filteredData.length"
        :page-size="pageSize"
        :current-page.sync="currentPage"
        @current-change="onPageChange"
      />
    </div>

    <!-- 发货弹窗 -->
    <el-dialog
      v-model="shippingDialogVisible"
      title="选择司机"
      width="500px"
      :before-close="handleCloseShippingDialog"
    >
      <el-form :model="shippingForm" label-width="100px">
        <el-form-item label="选择司机">
          <el-select
            v-model="shippingForm.selectedDriver"
            placeholder="请选择司机"
            style="width: 100%"
            @change="onDriverChange"
          >
            <el-option
              v-for="driver in driverOptions"
              :key="driver.name"
              :label="`${driver.name} - ${driver.phone}`"
              :value="driver.name"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="shippingDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmShipping">
            确认发货
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";

const groupLeaderOptions = ["A-团长", "B-团长", "C-团长", "D-团长"];
const groupAreaOptions = ["一区", "二区", "三区"];

// 司机选项
const driverOptions = [
  { name: "王师傅", phone: "18555555555" },
  { name: "张师傅", phone: "18666666666" },
];

const allRecords = ref([
  {
    shippingNo: "20200200003",
    shippingDate: "2020-02-14",
    groupLeader: "A-团长",
    goodsCount: "79件",
    driver: "-",
    phone: "-",
    carNo: "-",
    status: "pending",
    statusLabel: "待发货",
  },
  {
    shippingNo: "20200200003",
    shippingDate: "2020-02-14",
    groupLeader: "B-团长",
    goodsCount: "79件",
    driver: "王师傅",
    phone: "18555555555",
    carNo: "渝A・MS220",
    status: "delivering",
    statusLabel: "送货中",
  },
  {
    shippingNo: "20200200003",
    shippingDate: "2020-02-14",
    groupLeader: "C-团长",
    goodsCount: "79件",
    driver: "王师傅",
    phone: "18555555555",
    carNo: "渝A・MS220",
    status: "received",
    statusLabel: "已收货",
  },
  {
    shippingNo: "20200200003",
    shippingDate: "2020-02-14",
    groupLeader: "D-团长",
    goodsCount: "79件",
    driver: "王师傅",
    phone: "18555555555",
    carNo: "渝A・MS220",
    status: "received",
    statusLabel: "已收货",
  },
]);

const filters = ref({
  groupLeader: "",
  groupArea: "",
  dateRange: [],
  orderNo: "",
  driver: "",
  name: "",
  receiver: "",
});

const activeTab = ref("all");
const currentPage = ref(1);
const pageSize = 4;
const selectedRows = ref([]);

// 发货弹窗相关
const shippingDialogVisible = ref(false);
const shippingForm = ref({
  selectedDriver: "",
});
const currentShippingRow = ref(null);

const filteredData = computed(() => {
  let data = allRecords.value;
  if (activeTab.value !== "all") {
    data = data.filter((r) => r.status === activeTab.value);
  }
  if (filters.value.groupLeader) {
    data = data.filter((r) => r.groupLeader === filters.value.groupLeader);
  }
  if (filters.value.groupArea) {
    data = data.filter((r) => r.groupArea === filters.value.groupArea);
  }
  if (filters.value.orderNo) {
    data = data.filter((r) => r.shippingNo.includes(filters.value.orderNo));
  }
  if (filters.value.driver) {
    data = data.filter((r) => r.driver.includes(filters.value.driver));
  }
  if (filters.value.name) {
    // 假设有姓名字段，mock数据未体现
  }
  if (filters.value.receiver) {
    // 假设有收件人字段，mock数据未体现
  }
  if (filters.value.dateRange && filters.value.dateRange.length === 2) {
    const [start, end] = filters.value.dateRange;
    data = data.filter((r) => {
      const time = new Date(r.shippingDate);
      return time >= new Date(start) && time <= new Date(end);
    });
  }
  return data;
});

const pagedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize;
  return filteredData.value.slice(start, start + pageSize);
});

function onSearch() {
  currentPage.value = 1;
}
function onReset() {
  filters.value = {
    groupLeader: "",
    groupArea: "",
    dateRange: [],
    orderNo: "",
    driver: "",
    name: "",
    receiver: "",
  };
  currentPage.value = 1;
}
function onExport() {
  alert("导出功能待实现");
}
function onSelectionChange(val) {
  selectedRows.value = val;
}
function onView(row) {
  alert("查看功能待实现");
}
function onShip(row) {
  currentShippingRow.value = row;
  shippingForm.value = {
    selectedDriver: "",
  };
  shippingDialogVisible.value = true;
}
function onChange(row) {
  alert("更换功能待实现");
}
function onPrint(row) {
  alert("打印功能待实现");
}
function onPageChange(page) {
  currentPage.value = page;
}

// 司机选择变化时的处理
function onDriverChange(driverName) {
  // 可以在这里添加其他逻辑，比如验证等
}

// 确认发货
function confirmShipping() {
  if (!shippingForm.value.selectedDriver) {
    alert("请选择司机");
    return;
  }
  
  // 更新当前行的司机信息
  if (currentShippingRow.value) {
    const selectedDriver = driverOptions.find(
      driver => driver.name === shippingForm.value.selectedDriver
    );
    
    currentShippingRow.value.driver = shippingForm.value.selectedDriver;
    currentShippingRow.value.phone = selectedDriver.phone;
    currentShippingRow.value.status = "delivering";
    currentShippingRow.value.statusLabel = "送货中";
    currentShippingRow.value.carNo = "渝A・MS220"; // 模拟车牌号
  }
  
  shippingDialogVisible.value = false;
  alert("发货成功！");
}

// 关闭发货弹窗
function handleCloseShippingDialog() {
  shippingDialogVisible.value = false;
}
</script>

<style scoped>
.shipping-management {
  padding: 24px;
}
.filter-form {
  margin-bottom: 16px;
}
.tab-bar {
  margin-bottom: 16px;
}
.pagination-wrapper {
  margin-top: 16px;
  text-align: right;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>